<template>
  <div class="container ml-3">
    <el-form label-position="left" ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="视频类型">
        <select v-model="form.streamType" placeholder="">
          <option label="主码流" value="main"></option>
<!--          <option label="子码流" value="sub"></option>-->
        </select>
      </el-form-item>
      <el-form-item label="视频编码">
        <select v-model="form.codecType" placeholder="">
          <option label="H.264" value="H.264"></option>
<!--          <option label="H.265" value="H.265"></option>-->
        </select>
      </el-form-item>
      <el-form-item label="分辨率">
        <select v-model="form.ratio" placeholder="" disabled>
          <option label="384*288" value="384*288"></option>
          <option label="640*480" value="640*480"></option>
        </select>
      </el-form-item>
      <el-form-item label="编码性能">
        <select v-model="form.profile" placeholder="">
          <option label="高" value="high"></option>
          <option label="中" value="mid"></option>
          <option label="低" value="low"></option>
        </select>
      </el-form-item>
      <el-form-item label="视频帧率">
        <el-select class="w-[202px]  compact-select" v-model.number="form.frameRate" placeholder="" filterable allow-create default-first-option>
          <el-option label="1" :value="1" v-if="form.maxFrameRate >= 1"></el-option>
          <el-option label="2" :value="2" v-if="form.maxFrameRate >= 2"></el-option>
          <el-option label="4" :value="4" v-if="form.maxFrameRate >= 4"></el-option>
          <el-option label="6" :value="6" v-if="form.maxFrameRate >= 6"></el-option>
          <el-option label="8" :value="8" v-if="form.maxFrameRate >= 8"></el-option>
          <el-option label="10" :value="10" v-if="form.maxFrameRate >= 10"></el-option>
          <el-option label="12" :value="12" v-if="form.maxFrameRate >= 12"></el-option>
          <el-option label="15" :value="15" v-if="form.maxFrameRate >= 15"></el-option>
          <el-option label="16" :value="16" v-if="form.maxFrameRate >= 16"></el-option>
          <el-option label="18" :value="18" v-if="form.maxFrameRate >= 18"></el-option>
          <el-option label="20" :value="20" v-if="form.maxFrameRate >= 20"></el-option>
          <el-option label="22" :value="22" v-if="form.maxFrameRate >= 22"></el-option>
          <el-option label="25" :value="25" v-if="form.maxFrameRate >= 25"></el-option>
          <el-option label="30" :value="30" v-if="form.maxFrameRate >= 30"></el-option>
          <el-option label="50" :value="50" v-if="form.maxFrameRate >= 50"></el-option>
        </el-select>
        <span style="margin-left: 5px">fps</span>
      </el-form-item>
      <el-form-item label="I帧间隔">
        <input class="w-[202px]" v-model.number="form.keyFrameInterval" type="number" >
        <span style="margin-left: 5px">(1-400)</span>
      </el-form-item>
      <el-form-item label="码流类型">
        <select v-model="form.bitrateType" placeholder="">
          <option label="定码率" value="CBR"></option>
          <option label="变码率" value="VBR"></option>
        </select>
      </el-form-item>
      <el-form-item label="码流上限" >
        <el-select class="w-[202px]  compact-select" v-model.number="form.bitrate"  placeholder="" filterable allow-create default-first-option>
          <el-option label="256" :value="256"></el-option>
          <el-option label="512" :value="512"></el-option>
          <el-option label="1024" :value="1024"></el-option>
          <el-option label="2048" :value="2048"></el-option>
          <el-option label="3072" :value="3072"></el-option>
            <el-option label="4096" :value="4096"></el-option>
            <el-option label="6144" :value="6144"></el-option>
              <el-option label="8192" :value="8192"></el-option>
                <el-option label="12288" :value="12288"></el-option>
                  <el-option label="16384" :value="16384"></el-option>
        </el-select>
        <span style="margin-left: 5px">Kbps</span>
      </el-form-item>
        <el-button class="!mt-8" type="primary" @click="save" style="width: 120px; ">保存</el-button>
    </el-form>
    <div>

    </div>

  </div>
</template>

<script>
import {getvideoparam, postvideoparams} from "@/api/api";

export default {
  name: 'index',
  data() {
    return {
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        maxFrameRate: 30,
      },
      rules: {
      },
    }
  },
  created() {
    getvideoparam().then(res => {
      this.form = res.data;
      this.form.ratio = res.data.width + '*' + res.data.height
    })
  },
  methods: {
    save() {
      // 校验视频帧率
      if (!this.form.frameRate || this.form.frameRate < 1 || this.form.frameRate > 50) {
        this.$message.error('视频帧率的范围是1-50');
        return;
      }
      // 校验码流上限
      if (!this.form.bitrate || this.form.bitrate < 1 || this.form.bitrate > 16384) {
        this.$message.error('码流上限的范围是1-16384');
        return;
      }
      if (this.form.keyFrameInterval < 1 || this.form.keyFrameInterval > 400) {
        this.$message.error('I帧的间隔范围是1-400');
        return;
      }
      this.form.width = Number(this.form.ratio.split("*")[0])
      this.form.height = Number(this.form.ratio.split("*")[1])
      // this.form.frameRate100 = this.form.frameRate * 100;
      postvideoparams(this.form).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        });
      }).catch(err => {
        this.$message.error('保存失败');
      });
    },
  }
}
</script>

<style scoped>
.container {
}
.button {
  margin-left: 10%;
  margin-top: 5%;
}
select {
  width: 202px;
}
input{
  padding-left: 5px;
}
.el-input--medium .el-input__inner {
height: 20px !important;
line-height: 20px !important;
border-radius: 0px !important;
}
/*
  使用 ::v-deep 深度选择器来覆盖 el-select 的内部样式
  .compact-select 是我们刚刚在 el-select 上添加的自定义类，用于限定作用范围
*/
.compact-select ::v-deep .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
  color: black;
}

/* 可选：如果右侧的箭头图标位置不正确，可以用这个来微调 */
.compact-select ::v-deep .el-input__suffix {
  top: 0;
  right: -3px;
}
::v-deep .el-select .el-input .el-select__caret  {
  color: #000000;
}
</style>
